<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
    <!--<link rel="stylesheet" href="http://www.bootcss.com/p/bootstrap-switch/static/stylesheets/bootstrapSwitch.css">-->
    <link rel="stylesheet" href="/stylesheets/website.css">

    <link rel="stylesheet" href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="/js/googleapis_jquery.min.js"></script>

    <script>


        function load(data) {
            var videobody = '';

            data.videos.forEach(function (video, i, arr) {
                var btnid = video.type_id.toString() + '_btn';

                if (data.type_id && data.type_id > 0) {
                    if (video.type_id == data.type_id) {

                        videobody += '<tr><td>' + video.videoname + '</td>'
                                + '<td><button id="' + btnid + '" class="btn btn-primary" data-toggle="modal" onclick="close1()">关闭</button></td>'
                                + '<td><button id="' + btnid + '" class="btn btn-primary" data-toggle="modal" onclick="showAcount()">获取账号</button></td>'
                                + '<td><a href="' + video.href + '">' + video.videoname + '</a></td></tr>';
                    } else {
                        videobody += '<tr><td>' + video.videoname + '</td>'
                                + '<td><button id="' + btnid + '" class="btn btn-primary" disabled="true" data-toggle="modal" onclick="openAcount(this.id)">开通</button></td>'
                                + '<td>无</td>'
                                + '<td><a href="' + video.href + '">' + video.videoname + '</a> </td></tr>';
                    }
                } else {
                    videobody += '<tr><td>' + video.videoname + '</td>'
                            + '<td><button id="' + btnid + '" class="btn btn-primary" data-toggle="modal" onclick="openAcount(this.id)">开通</button></td>'
                            + '<td>无</td>'
                            + '<td><a href="' + video.href + '">' + video.videoname + '</a> </td></tr>';

                }

            });
            document.getElementById("video_body").innerHTML = videobody.toString();
        }

        window.onload = function () {

            var aj = $.ajax({
                url: '/acounts/getacounts',// 跳转到 action
                type: 'get',
                cache: false,
                dataType: 'json',
                success: function (data) {
                    if (data.code == 0) {

                     load(data)

                    } else {
                        view(data.msg);
                    }
                },
                error: function () {
                    // view("异常！");
                    alert("load 异常！");
                }
            });


        };

        function close1() {
//            var type_id = id.split('_')[0];

            var aj = $.ajax({
                url: '/acounts/close',// 跳转到 action
                type: 'post',
                cache: false,
                dataType: 'json',
                success: function (data) {
                    if (data.code == 0) {

                        load(data);

                    }

                },

                error: function () {
                    // view("异常！");
                    alert("acount 异常！");
                }
            });

        };

        function showAcount() {

            var aj = $.ajax({
                url: '/acounts/getacount',// 跳转到 action
                type: 'get',
                cache: false,
                dataType: 'json',
                success: function (data) {
                    if (data.code == 0) {
                        $('#username').text(data.acountname);
                        $('#password').text(data.password);

                        $('#myModal').modal('show')
                    }

                },
                error: function () {
                    // view("异常！");
                    alert("acount 异常！");
                }


            });
        }

        //开通一个视频账号
        function openAcount(id) {

            var type_id = id.split('_')[0];

            var aj = $.ajax({
                url: '/acounts/acount',// 跳转到 action
                data: {
                    type_id: type_id
                },
                type: 'get',
                cache: false,
                dataType: 'json',
                success: function (data) {
                    if (data.code == 0) {
                        // view("修改成功！");
//                        window.location.reload();

                        var videobody = '';

                        data.videos.forEach(function (video, i, arr) {

                            var btnid = video.type_id.toString() + '_btn';

                            if (data.type_id && data.type_id > 0) {
                                if (video.type_id == data.type_id) {

                                    videobody += '<tr><td>' + video.videoname + '</td>'
                                            + '<td><button id="' + btnid + '" class="btn btn-primary" data-toggle="modal" onclick="close1()">关闭</button></td>'
                                            + '<td><button id="' + btnid + '" class="btn btn-primary" data-toggle="modal" onclick="showAcount()">获取账号</button></td>'
                                            + '<td><a href="' + video.href + '">' + video.videoname + '</a> </td></tr>';
                                } else {
                                    videobody += '<tr><td>' + video.videoname + '</td>' + '<td><button id="' + btnid + '" class="btn btn-primary" disabled="true" data-toggle="modal" onclick="openAcount(this.id)">开通</button></td>' + '<td>无</td>' + '<td><a href="' + video.href + '">' + video.videoname + '</a> </td></tr>';
                                }
                            } else {
                                videobody += '<tr><td>' + video.videoname + '</td>' + '<td><button id="' + btnid + '" class="btn btn-primary" data-toggle="modal" onclick="openAcount(this.id)">开通</button></td>' + '<td>无</td>' + '<td><a href="' + video.href + '">' + video.videoname + '</a> </td></tr>';

                            }

                        });


                        document.getElementById("video_body").innerHTML = videobody.toString();

                        $('#username').text(data.acountname);
                        $('#password').text(data.password);

                        $('#myModal').modal('show')


                    } else {
                        view(data.msg);
                    }
                },
                error: function () {
                    // view("异常！");
                    alert("acount 异常！");
                }
            });

        }


    </script>
    <!--<script src="http://www.bootcss.com/p/bootstrap-switch/static/js/bootstrapSwitch.js"/>-->
</head>
<body>
<!--<nav class="navbar navbar-default navbar-fixed-top">-->
<!--<div class="container-fluid">-->
<!--<div class="navbar-header">-->
<!--<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"-->
<!--data-target="#navbar-collapse-1" aria-expanded="false"><span class="icon-bar"></span><span-->
<!--class="icon-bar"></span><span class="icon-bar"></span></button>-->
<!--<a class="navbar-brand" href="/One"><i class="fa fa-bolt"></i> CroLAX</a></div>-->
<!--<div class="collapse navbar-collapse" id="navbar-collapse-1">-->
<!--<ul class="nav navbar-nav">-->
<!--<li><a href="/One">首页</a></li>-->
<!--<li><a href="/Manage">我的帐号</a></li>-->
<!--<li><a href="/One/how">使用教程</a></li>-->
<!--<li><a href="/One/ranking">邀请排行</a></li>-->
<!--<li><a href="/One/logout">注销</a></li>-->
<!--<li><a href="/"><i class="fa fa-mobile"></i> iOS加速</a></li>-->
<!--</ul>-->
<!--</div>-->
<!--</div>-->
<!--</nav>-->
<div class="container">
    <div class="row w_mt8">
        <div class="col-md-12">
            <!--<p><a href="/My">管理 iOS 加速帐号，请点击此处</a></p>-->
            <ul class="nav nav-tabs">
                <li><a href="/personal">我的帐号</a></li>
                <li class="active"><a href="/home">我的订单</a></li>
                <li><a href="/yaoqing">邀请奖励</a></li>
                <li><a href="/modify_pwd">修改密码</a></li>

            </ul>
        </div>
    </div>
    <div class="row w_mt8">
        <div class="col-md-12"></div>
    </div>
    <div class="row w_mt8">
        <div class="col-md-12"><p>
            如果付款后状态显示为“已付款，处理中”或“等待确认收货”，而在帐号列表中查询不到帐号信息，请先等待5分钟，如果5分钟后仍未查询到帐号，请和客服邮箱（service@crolax.com）联系。</p>
            <table class="table table-hover">
                <thead>
                <tr>
                    <th>视频网站名称</th>
                    <th>开通状态</th>
                    <th>账号信息</th>
                    <th>网站链接</th>
                </tr>
                </thead>
                <tbody id="video_body">


                <!--<tr>-->
                <!--<td>优酷土豆</td>-->
                <!--<td>-->
                <!--<button id="youkubtn" type="button" class="btn btn-primary" onclick="showdialog(this.id)">开通-->
                <!--</button>-->
                <!--</td>-->
                <!--<td>无</td>-->
                <!--<td><a href="http://www.youku.com/">跳转优酷</a></td>-->
                <!--</tr>-->
                </tbody>
            </table>
        </div>
    </div>
</div>
<script src="//hm.baidu.com/hm.js?a1097a887d859a790dab60ee865f3874"></script>
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
    var _hmt = _hmt || [];
    (function () {
        var hm = document.createElement("script");
        hm.src = "//hm.baidu.com/hm.js?a1097a887d859a790dab60ee865f3874";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();


</script>
<div class="container">
    <footer class="footer">
        <div class="container"><p>客服邮箱：<a href="mailto:service@crolax.com">service@crolax.com</a><br><span
                class="text-danger">（请用网站注册邮箱联系，否则查询不到帐号信息将无法回复）</span></p></div>
    </footer>
</div>

<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    账号密码
                </h4>
            </div>
            <div class="modal-body">

                <table class="table">
                    <thead>
                    <tr>
                        <th>用户名:</th>
                        <th id="username"></th>
                        <th>密码:</th>
                        <th id="password"></th>

                    </tr>
                    </thead>
                    <!--<tbody>-->

                    <!--</tbody>-->
                </table>


            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-primary">
                    提交更改
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>


<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion"
                   href="#collapseOne">
                    点击我进行展开，再次点击我进行折叠。第 1 部分
                </a>
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">
                Nihil anim keffiyeh helvetica, craft beer labore wes anderson
                cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
                vice lomo.
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion"
                   href="#collapseTwo">
                    点击我进行展开，再次点击我进行折叠。第 2 部分
                </a>
            </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse">
            <div class="panel-body">
                Nihil anim keffiyeh helvetica, craft beer labore wes anderson
                cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
                vice lomo.
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion"
                   href="#collapseThree">
                    点击我进行展开，再次点击我进行折叠。第 3 部分
                </a>
            </h4>
        </div>
        <div id="collapseThree" class="panel-collapse collapse">
            <div class="panel-body">
                Nihil anim keffiyeh helvetica, craft beer labore wes anderson
                cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
                vice lomo.
            </div>
        </div>
    </div>
</div>

</body>
</html>